<template>
  <div class="career-ai">
    <!-- 搜索内容直接显示 -->
    <div class="content-wrapper">
      <div class="main-content">
        <div class="search-section">
          <div class="section-header">
            <h3>搜寻期望职业</h3>
          </div>
          <div class="optimized-input-group">
            <el-input v-model="city" placeholder="输入城市" />
            <el-input v-model="career" placeholder="输入职业名称" />
            <el-button 
              type="primary" 
              :loading="searchLoading"
              @click="handleSearch"
            >
              查询
            </el-button>
            <p color="#adc4cc">（请再次点击？可关闭搜索窗）</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 结果弹窗 -->
    <el-dialog 
      v-model="resultVisible" 
      title="查询结果"
      width="90%"
      :max-width="600"
    >
    <div v-if="currentResult" class="result-content">
        <h3>{{ currentResult.title }}</h3>
        <div class="result-stats">
          <div class="stat-item">
            <span>💰 平均月薪</span>
            <span>{{ formatSalary(currentResult.avgSalary) }}</span>
          </div>
          <div class="stat-item">
            <span>📈 就业率</span>
            <span>{{ formatRate(currentResult.employmentRate) }}</span>
          </div>
          <div class="trend-line" :style="trendStyle(currentResult)"></div>
        </div>
        <!-- 新增内容 -->
        <div class="additional-info">
          <div class="info-block">
            <h4><el-icon><Reading /></el-icon> 学历要求</h4>
            <el-tag type="info">{{ currentResult.educationRequirement }}</el-tag>
          </div>
          <div class="info-block">
            <h4><el-icon><Clock /></el-icon> 工作经验</h4>
            <el-tag type="info">{{ currentResult.workExperience }}</el-tag>
          </div>
        </div>
        <div class="job-highlights">
          <h4><el-icon><Star /></el-icon> 职位亮点</h4>
          <ul>
            <li v-for="(highlight, index) in currentResult.highlights" :key="index">
              {{ highlight }}
            </li>
          </ul>
        </div>
        <div class="result-desc">
          <h4><el-icon><Document /></el-icon> 职位描述</h4>
          <p>{{ currentResult.description }}</p>
        </div>
        
        <!-- 新增城市推荐职业模块 -->
      <div class="city-recommendations">
        <h4><el-icon><Location /></el-icon> 城市推荐职业(职业-平均薪资-就业率)</h4>
        <template v-if="currentResult.cityRecommendations">
          <div v-for="(type, typeName) in currentResult.cityRecommendations" 
               :key="typeName" 
               class="recommendation-type">
            <h5>{{ typeName }}</h5>
            <div class="career-list">
              <div v-for="(career, careerName) in type" 
                   :key="careerName" 
                   class="career-item">
                <span class="name">{{ careerName }}</span>
                <span class="salary">{{ formatSalary(career.avgSalary) }}</span>
                <span class="rate">{{ formatRate(career.employmentRate) }}</span>
              </div>
            </div>
          </div>
        </template>
        <div v-else class="no-data">
          该城市暂时没有推荐职业
        </div>
      </div>

      </div>

      <template #footer>
        <el-button @click="resultVisible = false">关闭</el-button>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import cityDatabase from '../../public/data/career-data.json'

export default {
  data() {
    return {
      city: '',
      career: '',
      searchLoading: false,
      resultVisible: false,
      currentResult: null,
      cityDatabase // 新增数据库引用
    }
  },
  methods: {
    async handleSearch() {
      if (!this.city.trim() || !this.career.trim()) {
        this.$message.warning('请输入城市和职业名称')
        return
      }
      const cityData = this.cityDatabase[this.city.trim()]; 
    if (!cityData) {
      this.$message.warning('该城市暂无数据');
      return;
    }

      this.searchLoading = true
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 800))
        const cityData = this.cityDatabase[this.city]; // 从数据库中获取城市数据
        // 修改后的模拟数据
        this.currentResult = {
                title: `${this.city} ${this.career} 职业信息`,
                city: this.city,
                career: this.career,
                industry: this.getRandomIndustry(), // 新增行业领域
                jobType: ['全职', '兼职', '实习'][Math.floor(Math.random() * 3)], // 新增岗位类型
                avgSalary: Math.random() * 20000 + 5000,
                employmentRate: Math.random() * 0.5 + 0.5,
                educationRequirement: ['本科以上', '硕士以上', '博士'][Math.floor(Math.random() * 3)], // 新增学历要求
                workExperience: ['应届生', '1-3年', '3-5年', '5年以上'][Math.floor(Math.random() * 4)], // 新增工作经验
                highlights: [
                  '前沿技术领域',
                  '弹性工作时间',
                  '股权激励计划',
                  '高端商业保险'
                ].sort(() => 0.5 - Math.random()).slice(0, 3), // 随机选择3个亮点
                description: `在${this.city}地区，${this.career}岗位需求旺盛，平均薪资水平较高，就业前景良好。要求${this.getRandomEducation()}学历，具有${this.getRandomExperience()}相关经验。`,
                cityRecommendations: cityData || null
          };
        this.resultVisible = true
      } catch (error) {
        this.$message.error('查询失败')
      } finally {
        this.searchLoading = false
      }
    },
    formatSalary(num) {
      return `${Math.floor(num).toLocaleString()}元`
    },
    formatRate(num) {
      return `${(num * 100).toFixed(1)}%`
    },
    trendStyle(item) {
      const width = Math.min(item.employmentRate * 100, 100)
      return {
        width: `${width}%`,
        'background-color': width > 70 ? '#4CAF50' : width > 50 ? '#FFC107' : '#F44336'
      }
    },
    getRandomIndustry() {
      const industries = ['互联网', '金融', '智能制造', '生物医药', '新能源'];
      return industries[Math.floor(Math.random() * industries.length)];
    },
    getRandomEducation() {
      return ['本科', '硕士', '博士'][Math.floor(Math.random() * 3)];
    },
    getRandomExperience() {
      return ['1-3年', '3-5年', '5年以上'][Math.floor(Math.random() * 3)];
    }
  }
}
</script>

<style scoped>
.career-ai {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0vh;
  padding: 20px;
}

.content-wrapper {
  width: 100%;
  max-width: 500px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  padding: 30px;
}

.section-header {
  text-align: center;
  margin-bottom: 25px;
}

.section-header h3 {
  font-size: 1.5rem;
  color: #303133;
}

.optimized-input-group {
  display: grid;
  gap: 15px;
}

.el-input :deep(.el-input__inner) {
  height: 45px;
  font-size: 1rem;
}

.el-button {
  height: 45px;
  font-size: 1rem;
  border-radius: 6px;
  margin-top: 10px;
}
/* 新增样式 */
.info-group {
  display: flex;
  gap: 15px;
  margin: 10px 0;
  color: #606266;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
}

.additional-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7.5px; /* 间距减半 */
  margin: 15px 0; /* 外边距减少 */
}

.info-block h4 {
  margin: 10px 0;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 4px; /* 内部元素间距调整 */
}

.job-highlights ul {
  list-style: none;
  padding-left: 0;
}

.job-highlights li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 8px;
}

.job-highlights li:before {
  content: "✓";
  color: #67C23A;
}

.result-desc h4 {
  margin: 15px 0 10px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 新增推荐 */
/* 新增样式 */
.city-recommendations {
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.recommendation-type {
  margin-bottom: 20px;
}

.recommendation-type h5 {
  color: #409EFF;
  margin: 15px 0;
  font-size: 15px;
}

.career-list {
  display: grid;
  gap: 12px;
}

.career-item {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  transition: all 0.3s;
}

.career-item:hover {
  transform: translateX(5px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.name {
  flex: 2;
  color: #303133;
}

.salary {
  flex: 1;
  text-align: right;
  color: #67C23A;
  margin: 0 15px;
}

.rate {
  flex: 1;
  text-align: right;
  color: #409EFF;
}

.no-data {
  text-align: center;
  color: #909399;
  padding: 20px;
  font-size: 14px;
}
</style>